<template>
  <div class="user-container">
    <el-card>
      <el-alert
        :title="`共${counts}条记录`"
        type="info"
        show-icon
        :closable="false"
      />
      <el-table :data="User" show-header style="width: 100%" stripe>
        <el-table-column label="操作类型" width="180" prop="operate" />
        <el-table-column prop="operator" label="操作人" width="180" />
        <el-table-column prop="outcome" label="执行结果" />
        <el-table-column prop="timing" label="操作时间" />
        <el-table-column prop="depicted" label="描述" />
      </el-table>
      <el-pagination
        :current-page="query.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
// let dayjs = require("dayjs");
export default {
  name: 'ViewsManageRight',
  data() {
    return {
      User: [],
      UserList: [
        {
          operate: 'US',
          operator: '高启强',
          outcome:
            '料史如会带术小任子你千共过什上方正性属速需真联适习去识物号集铁两准照拉布。',
          timing: this.dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
          depicted: '以少次打'
        },
        {
          operate: 'JP',
          operator: '高启盛',
          outcome:
            '料史如会带术小任子你千共过什上方正性属速需真联适习去识物号集铁两准照拉布。',
          timing: this.dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
          depicted: '回公角志'
        },
        {
          operate: 'JP',
          operator: '高启盛',
          outcome:
            '料史如会带术小任子你千共过什上方正性属速需真联适习去识物号集铁两准照拉布。',
          timing: this.dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
          depicted: '回公角志'
        },
        {
          operate: 'JP',
          operator: '高启盛',
          outcome:
            '料史如会带术小任子你千共过什上方正性属速需真联适习去识物号集铁两准照拉布。',
          timing: this.dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
          depicted: '回公角志'
        },
        {
          operate: 'JP',
          operator: '高启盛',
          outcome:
            '料史如会带术小任子你千共过什上方正性属速需真联适习去识物号集铁两准照拉布。',
          timing: this.dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
          depicted: '回公角志'
        },
        {
          operate: 'JP',
          operator: '高启盛',
          outcome:
            '料史如会带术小任子你千共过什上方正性属速需真联适习去识物号集铁两准照拉布。',
          timing: this.dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
          depicted: '回公角志'
        },
        {
          operate: 'JP',
          operator: '高启盛',
          outcome:
            '料史如会带术小任子你千共过什上方正性属速需真联适习去识物号集铁两准照拉布。',
          timing: this.dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
          depicted: '回公角志'
        },
        {
          operate: 'JP',
          operator: '高启盛',
          outcome:
            '料史如会带术小任子你千共过什上方正性属速需真联适习去识物号集铁两准照拉布。',
          timing: this.dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
          depicted: '回公角志'
        }
      ],
      query: {
        page: 1,
        pagesize: 5
      }
    }
  },
  computed: {
    counts() {
      return this.UserList.length
    }
  },
  created() {
    this.aaa()
  },
  methods: {
    aaa(pagesize = 0) {
      console.log(pagesize)
      this.User = this.UserList.slice(
        pagesize,
        this.query.pagesize * this.query.page
      )
    },
    handleSizeChange(val) {
      this.query.pagesize = val
      this.aaa()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.aaa(this.query.pagesize * this.query.page - 5)
    }
  }
}
</script>

<style>
</style>
